<template>
	<view :class="['container',activeIndex===1?'brokerBg1':'brokerBg',isShowPost?'preventMsak':'' ] ">
		<!-- <view class="phone" @click="kfPhone()">
			<image src="https://images.linglinggong.net/static/icon2/phone.png" mode="aspectFill"></image>
			<text>客服</text>
		</view> -->
		<view v-if="activeIndex===1" style="position: fixed;top: 2%;right: 0;z-index: 99999999;"
			@click="handleOpenPage(9)">
			<image style="width: 180rpx;height: 100%;" src="http://images.linglinggong.net/Fvy9ESiw6ng0cEbOrKIcY2ALpoED"
				mode="widthFix"></image>
		</view>
		<view class="nav-title">
			<view class="nav-title-sear">
				<view :class="['nav-title-sear-left',activeIndex===1?'active':''] " @click="changTab(1)"> 叫工友 </view>
				<view :class="['nav-title-sear-right',activeIndex===2?'active':'']" @click="changTab(2)"> 经纪人 </view>
			</view>
		</view>
		<!-- 工友 -->
		<view class="" v-if="activeIndex===1">
			<view class="fix-title" @click="isShowShare = false">
				<view class="invite_info">
					<view class="invite_info_item">
						<text style="color: #661404;font-size: 26rpx;font-weight: 600;">有效邀请人数</text>
						<view style="position: relative;">
							<!-- 	<view class="tips3" style="right:-45%;top:-40%">
								<uni-tooltip :styleType="1" :styleType2="1" content="黑色:本月有效邀请的雇员 红色:本月有效邀请的雇主">
									<image style="" src="http://images.linglinggong.net/Ftgs3f9RjviRoe6o1qzQThRAav70"
										mode="widthFix"></image>
								</uni-tooltip>
							</view> -->
							<text class="invite_info_item_num" style="color: #FF444B">{{monthGy}}</text>
							<!-- <text class="invite_info_item_num" style="color: #FF444B">+{{yxgz}}</text> -->
						</view>
					</view>
					<view class="invite_info_border"></view>
					<view class="invite_info_item">
						<text style="color: #661404;font-size: 26rpx;font-weight: 600;">累计邀请人数</text>
						<view>
							<text class="invite_info_item_num">{{totalInv}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="yqroul">
				<view class="rankTitle">
					<text> 月邀请奖励 </text>
				</view>
				<view class="rank">
					<view class="rankItem" v-for="(t,index) in dataList" :key="index">
						<text>{{t.num}}人</text>
						<view class="rankBg ">
							<view class="rankStatus">
								<view class="rankStatus1">
								</view>
								<view class="rankStatus2" :style="{ 'height': (totalInv/t.num*150)+'rpx' }">
								</view>
								<view class="rankStatus3">
									<text v-if="(t.num-totalInv)>0"> 还差 {{t.num-totalInv}}人 </text>
								</view>
							</view>
						</view>
						<text class="text">
							{{t.money}}元 </text>
					</view>
				</view>
				<view class="rankTime">
					<view class="rankTime-p">
						<view class="rankTime">
							<view class="daoji-time" style="display: none;">
								<u-count-down :time="daojiTime" format="DD:HH:mm:ss" autoStart millisecond
									@change="onChange">
									<view class="time">
										<text class="time__item">{{ timeData.days }}天</text>
										<text
											class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}时</text>
										<text class="time__item">{{ timeData.minutes }}分钟</text>
										<text class="time__item">{{ timeData.seconds }}秒</text>
									</view>
								</u-count-down>
							</view>
							<view v-if="remainderMonthDay>0"
								style="margin-bottom: -4rpx; transform: translateY(240rpx);">
								<text>本期仅剩：</text>
								<text style="font-size: 28rpx;">{{remainderMonthDay}}</text><text
									style="font-size: 26rpx;margin-top: 0rpx;">天</text>
							</view>
							<view v-else style="margin-bottom: -4rpx;">
								<view v-if="(24 - (new Date().getHours() + 1))>0">
									<text>本期仅剩：</text>
									<text>{{ 24 - (new Date().getHours() + 1) }}小时{{60 - new Date().getMinutes()}}分钟</text>
								</view>
								<view v-else>
									<text>本期仅剩：</text>
									<text>{{60 - new Date().getMinutes()}}分钟{{ 60 - new Date().getSeconds() }}秒</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="make-money">
				<view class="title"> 邀请赚钱指南 </view>
				<view class="steps">
					<view class="item">
						<view class="step"> 第一步 </view>
						<image src="https://images.linglinggong.net/static/newMy/invite2.png" mode=""></image>
						<view class=""> 好友下载并 <br> 注册为<text style="font-weight: bold;">零工</text>
						</view>
					</view>
					<image src="https://images.linglinggong.net/static/newMy/invite5.png" mode=""></image>
					<view class="item">
						<view class="step"> 第二步 </view>
						<image src="https://images.linglinggong.net/static/newMy/invite3.png" mode=""></image>
						<view class=""> 好友 <text style="font-weight: bold;padding:0 10rpx;"> 完工1单</text><br> （工时 ≥6小时）
						</view>
					</view>
					<image src="https://images.linglinggong.net/static/newMy/invite5.png" mode=""></image>
					<view class="item">
						<view class="step"> 第三步 </view>
						<image src="https://images.linglinggong.net/static/newMy/invite4.png" mode=""></image>
						<view class=""> 获取奖励 </view>
					</view>
				</view>
			</view>
			<view class="rankList">
				<view class="rankList-title">
					<view class=""> 被邀请人 <text v-if="userEventList.length>0">{{userEventListLength}}人</text>
					</view>
				</view>
				<view class="rankList-list" v-if="userEventList.length>0">
					<view class="rankList-list-top">
						<view class="rankList-list-top-title">
							<view class="" v-for="(t,index) in titleList" :key="index">
								{{t}}
							</view>
						</view>
						<view class="rankList-list-top-content" v-for="(t,index) in userEventList" :key="index">
							<text>{{t.userName}}</text>
							<text>{{t.price}}元</text>
							<checkbox disabled="true" class="checkbox1" style="border-radius: 50% !important;"
								:checked="t.orders>0&&t.timeFlag"> </checkbox>
						</view>
					</view>
				</view>
				<view class="rankList-list-top-empty" v-else>
					<image class="img" src="https://images.linglinggong.net/static/empty.png" mode="scaleToFill">
					</image>
				</view>
			</view>
		</view>
		<!-- 经纪人 -->
		<view class="broker" v-if="activeIndex===2">
			<view class="" style="position: relative;">
				<lff-barrage ref="lffBarrage" minTop='20' maxTop='200'></lff-barrage>
			</view>
			<view class="broker-income">
				<view class="broker-income-text"> {{gainRevenue}}
					<!-- <view class=""> 10 </view> -->
				</view>
				<view class="broker-income-img">
					<image :src="`https://images.linglinggong.net/${user.avatar}`" mode="" class="img"></image>
					<view class=""> LV.1 </view>
				</view>
				<image @click="isTip=!isTip" class="question" src="https://images.linglinggong.net/static/question.png"
					mode=""></image>
				<view v-if="isTip" @click="isTip=false" class="tip">
					<!-- <text>推广收益</text>
					<text v-for="item in tipList"></text> -->
					<view class="title"> 推广收益 </view>
					<view v-for="(item,i) in tipList" :key="i">
						<view> {{tipListIndex[i]}} </view>
						<view> {{item.remark}} </view>
					</view>
				</view>
			</view>
			<view class="broker-qrcode">
				<view class="broker-qrcode-title"> 推广二维码 </view>
				<view class="broker-qrcode-qr">
					<view class="qrimg">
						<!-- 二维码插件 width height设置宽高 -->
						<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>
				</view>
			</view>
			<view class="broker-qrcode-share">
				<button open-type="share" @ShareAppMessage="onShareAppMessage">
					<view>
						<image src="https://images.linglinggong.net/static/wx.png" mode="" class="img"></image>
						<view class=""> 分享至微信 </view>
					</view>
				</button>
				<view class="" @click="handleSaveAlbum">
					<image src="https://images.linglinggong.net/static/shouji.png" mode="" class="img"> </image>
					<view class=""> 保存至手机 </view>
				</view>
			</view>
			<!-- 邀请人数 -->
			<view class="broker-qrcode-num">
				<view class="broker-qrcode-num-title"> 邀请人数 </view>
				<view class="broker-qrcode-num-content">
					<view class="broker-qrcode-num-content-tip">
						<view> 已生效人数(个) </view>
						<view> {{invitationsCount}} </view>
						<!-- <view>
							<view> 待生效金额 </view>
							<view> 10 </view>
						</view> -->
					</view>
					<text> 人员列表 </text>
					<view>
						<view v-for="(item,index) in list" :key="index" :data-index="index" @click="downMenu">
							<view>
								<view>
									<text v-if="item.percentage==='0'">已失效({{item.count}}人)</text>
									<text v-else>{{item.percentage}}% 收益({{item.count}}人)</text>
								</view>
								<view>
									<image class="img1"
										src="https://images.linglinggong.net/static/icon1/finishInvite-jt.png"
										v-if="downIndex!==index"></image>
									<image class="img1"
										src="https://images.linglinggong.net/static/icon1/moreinfoSeelect.png" v-else>
									</image>
								</view>
							</view>
							<view class="child" v-if="downIndex===index">
								<view @click.stop v-for="(v,i) in item.invitedDetails" :key="i">
									<image :src="`https://images.linglinggong.net/${v.avatar}`" class="img">
									</image>
									<view> {{v.userName}}</view>
									<view v-if="[0,1].includes(index)&&v.sendTextMessages==='1'&&v.revenueGenerated==0"
										class="remind" @click.stop="remind(index,i,v.userId)"> 提醒发单 </view>
									<view
										v-else-if="[0,1].includes(index) &&v.sendTextMessages==='0'&&v.revenueGenerated==0"
										class="remind reminded"> 已提醒 </view>
									<view v-else class="amount"> {{v.revenueGenerated}}元</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 排行榜-->
			<view class="rankInvite">
				<view class="rankInvite-title"> 排行榜 </view>
				<view class="rankInvite-content">
					<view class="rankInvite-content-title">
						<text> 排名 </text>
						<text> 用户 </text>
						<text> 金额 </text>
					</view>
					<view class="rankInvite-content-list" v-for="(item,index) in rankInviteList.slice(0,3)"
						:key="index">
						<view>
							<image :src="`https://images.linglinggong.net/${index+1}-${index+1}.png`" class="image" />
						</view>
						<view>
							<image
								:style="{border:index==0?'2px solid #F7C366':index==1?'2px solid #B6C0C6':index==2?'2px solid #DD855A':''}"
								:src="`https://images.linglinggong.net/${item.avatar}`"
								:class="['img',index===0&&'yellow',index===1&&'white',index===2&&'golden']"></image>
							<view> {{item.userName}}</view>
						</view>
						<view>
							{{item.gainRevenue}}元
						</view>
					</view>
					<!-- 当前用户排名-->
					<view class="rankInvite-content-my">
						<view>
							<!-- <image src="https://images.linglinggong.net/1-1.png" class="image"> -->
							{{user.rank}}
						</view>
						<view>
							<image :src="`https://images.linglinggong.net/${user.avatar}`" class="img">
								<view> {{user.userName}}</view>
						</view>
						<view> {{user.gainRevenue}}元 </view>
					</view>
					<view class="rankInvite-content-foot" @click="torank"> 查看全部 </view>
				</view>
			</view>
			<view class="broker-title">
				<text> 详细规则 </text>
			</view>
			<view class="broker-content">
				<view class="broker-content-text" :style="{'height':`${height}rpx`}">
					<view v-for="(t,i) in textlist" :key='i'>
						{{t}}
					</view>
				</view>
				<view class="broker-content-more" @click="onMore">
					{{moreText}}
				</view>
			</view>
		</view>
		<!-- 邀请规则 -->
		<view class="guize-btn-box" v-if="false">
			<view class="guize-btn-box-btn" @click="handleOpenPage(9)">邀 请 规 则</view>
		</view>
		<!-- 底部邀请按钮 -->
		<view class="bottom-img" @click="isShowShare = !isShowShare" v-if="activeIndex===1">
			<image src="https://images.linglinggong.net/static/yaoqing2.png" mode="widthFix"></image>
		</view>
		<!-- 	<view class="ljiyaoqing" @click="isShowShare = !isShowShare">
			<image src="http://images.linglinggong.net/Fi_YqpYT89ukua0rRWaSGwqOy1ee" mode="widthFix"></image>
		</view> -->
		<!-- 分享按钮 -->
		<view class="bottom" v-if="isShowShare">
			<view>
				<button open-type="share" @ShareAppMessage="onShareAppMessage">
					<image src="https://images.linglinggong.net/static/icon1/new-weixin.png" mode="aspectFill"></image>
				</button>
				<!-- <text>微信</text> -->
			</view>
			<view>
				<button open-type="share" @onShareTimeline="onShareTimeline">
					<image src="https://images.linglinggong.net/static/icon1/new-pyq.png" mode="aspectFill"></image>
				</button>
				<!-- <text>朋友圈</text> -->
			</view>
			<view @click="handleOpenPost" style="background-color: #FFFFFF;">
				<image src="https://images.linglinggong.net/static/icon1/new-ewm.png" mode="aspectFill"></image>
				<!-- <text>二维码</text> -->
			</view>
		</view>
		<!-- 分享海报 -->
		<view class="modal" v-if="isShowPost">
			<!-- 海报图 -->
			<canvas canvas-id="invitation-post"
				:style="{ width: '305px', height: '403px', position: 'fixed', top: '-9999px', left: '35px'}"></canvas>
			<view class="my-post">
				<image @longtap="handleSaveAlbum" :src="qrcodeSrc" mode=""></image>
			</view>
			<!-- <view class="my-post" @longpress="handleSaveAlbum">
				<image class="bg" :src="postUrl" mode="aspectFill"></image>
			</view> -->
			<image @click="handleClosePost" class="close" src="https://images.linglinggong.net/static/icon1/07.png">
			</image>
		</view>
		<u-popup mode="center" :show="isShowYaoq" @close="isShowYaoq=false" @open="openYaoq"
			:closeOnClickOverlay="false" bgColor="rgba(0,0,0,0)">
			<view class="fudai-box">
				<view class="fudai-box-center">
					<view class="fudai-box-center-p" @click="isShowYaoq=false">
						<image src="http://images.linglinggong.net/Fqt4OdqWbJpfLsTtPKZakyzJcxZ4" mode="widthFix">
						</image>
					</view>
					<image @click="closeYaoq" src="http://images.linglinggong.net/FrXwxopT93VDQpmkqFKzPxGHC-6P"
						mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
		<view class="hideQrcode" style="position: fixed;">
			<!-- 二维码插件 width height设置宽高 -->
			<canvas canvas-id="qrcode2" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
		</view>
	</view>
</template>
<script>
	import {
		baseURL
	} from '@/config'
	// import {
	// 	// getContacts
	// } from '@/libs/unit.js'
	import proGress from '@/components/progress/progress.vue'
	import uniTooltip from '@/components/uni-tooltip/uni-tooltip.vue'
	import icon from "uview-ui/libs/config/props/icon";
	import lffBarrage from "./lff-barrage/lff-barrage.vue"
	import uQRCode from "../../untils/uqrcode.js"
	export default {
		components: {
			proGress,
			uniTooltip,
			lffBarrage
		},
		data() {
			return {
				rankInviteList: [],
				list: [],
				moreText: '查看全部 >>',
				textlist: ['①奖励方式：被邀请雇主在平台消费按比例分成', '②消费定义：直通卡&加量包& 招聘费',
					'③比例分成方式：第一个月获得所消费的60%，第二月获得40%，第三个月获得 20%，第四个月获得 10%，后续每个月获得5%',
					'④绑定周期：被邀请雇主在被邀请后默认绑定2个月，2个月内若没有任务完成或消费，则取消绑定'
				],
				height: 240,
				toDay: '', //当前时间
				hasFlag: true, // 是否还有更多数据要加载
				imgPath: '', //图片路径
				friendsNum: '', //好友数量
				friendsList: [], //我的好友即下级列表
				friendsLists: [], //我的好友即下级列表
				isShowPost: false, //是否显示海报
				toUserId: 0,
				postUrl: '', //海报URL 
				time: '', //海报URL 
				times: '',
				obj: {},
				total: 0,
				num: 0,
				totalnum: '',
				isShowShare: false,
				requestObj: {
					pageNum: 0,
					pageSize: 10000,
				},
				timer: '', //
				Steps1: [],
				Steps2: [],
				topData1: [],
				topData2: [],
				percent1: 0,
				percent2: 0,
				timeData: {},
				serviceTelephone: '',
				daojiTime: 3600 * 1000 * 24 * 30,
				nowTime: new Date(),
				yxgy: 0,
				yxgz: 0,
				leijiRenshu: 0,
				monthPrice: 0,
				totalPrice: 0,
				yxgyMoney: 0,
				yxgzMoney: 0,
				gyMoneyList: [],
				gzMoneyList: [],
				yqUserAvantar: [],
				userInfo: uni.getStorageSync('userInfo'),
				isShowYaoq: false,
				activeIndex: 1,
				dataList: [],
				titleList: ['用户昵称', '奖金', '是否完工'],
				contentList: [{
					imgUrl: 'https://picx.zhimg.com/80/v2-c11ee4be4b4929802a9fe7d82cab9edc_720w.webp?source=1940ef5c',
					name: '用户_sdfg',
					money: 1,
					isok: 'ture',
					isfin: 'true'
				}, {
					imgUrl: 'https://picx.zhimg.com/80/v2-c11ee4be4b4929802a9fe7d82cab9edc_720w.webp?source=1940ef5c',
					name: '用户_sdfg',
					money: 1,
					isok: 'ture',
					isfin: 1
				}, ],
				downIndex: 0,
				user: {},
				gainRevenue: '', //已生效金额
				invitationsCount: '', //已生效人数
				monthGy: 0,
				totalInv: 0,
				userEventList: [],
				userEventListLength: '',
				danmu: ['林彦韦 已获得10元', '李宜豪 已获得10元', '陈志宏 已获得50元', '蔡国伟 已获得10元', '王培伦 已获得30元', '林宗其 已获得10元', '谢一忠 已获得10元',
					'谢健铭 已获得100元', '王秀兰 已获得10元', '王刚 已获得10元', '张鸣云 已获得30元', '马明杰 已获得30元', '李伟 已获得50元', '刘伟 已获得100元',
					'张军 已获得100元', '王安青 已获得10元', '邓家伟 已获得30元', '林辰和 已获得50元', '谢晓玲 已获得100元', '林佳蓉 已获得100元', '黄秋萍 已获得10元',
					'吴耀华 已获得10元', '王秀玲 已获得10元', '李小爱 已获得30元', '李雅惠 已获得30元', '方一强 已获得50元', '阮建安 已获得50元'
				],
				isTip: '', //问号提示
				tipList: [], //提示信息
				tipListIndex: ['①', '②', '③', '④', '⑤'],
				//生成二维码参数
				cid: 'tki-qrcode-canvas',
				val: '',
				size: 200,
				unit: 'px',
				show: true,
				background: '#000000',
				foreground: '#ffffff',
				pdground: '#ffffff',
				iconimg: '',
				iconsize: 20,
				lv: 3,
				onval: '',
				loadMake: '',
				usingComponents: '',
				showLoading: '',
				loadingText: '',
				//生成二维码参数
				qrcodeImg: '',
				showPeople: '',
				// 二维码尺寸
				qrcodeSize: 170,
				// 最终生成的二维码图片
				qrcodeSrc: '',
			}
		},
		computed: {
			icon() {
				return icon
			},
			remainderMonthDay() {
				let nowMonth = new Date().getMonth() + 1;
				let nowYear = new Date().getFullYear();
				let nowDay1 = new Date().getDate();
				if (nowMonth === 1 || nowMonth === 3 || nowMonth === 5 || nowMonth === 7 || nowMonth === 8 || nowMonth ===
					10 || nowMonth === 12) {
					return 31 - nowDay1;
				}
				if (nowMonth === 4 || nowMonth === 6 || nowMonth === 9 || nowMonth === 11) {
					return 30 - nowDay1;
				}
				if (nowMonth == 2) {
					if ((nowYear % 4 == 0 && nowYear % 100 != 0) || nowYear % 400 == 0) {
						return 29 - nowDay1;
					} else {
						return 28 - nowDay1;
					}
				}
			},
		},
		methods: {
			make() {
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.val,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {}
				})
			},
			make2() {
				uQRCode.make({
					canvasId: 'qrcode2',
					text: this.val,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {}
				})
			},
			qrR(e) {
				this.qrcodeImg = e
			},
			async remind(index, i, userId) {
				let res = await this.$fetch(`${this.$api.send_broker_sms}?userId=${userId}`, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.list[index].invitedDetails[i].sendTextMessages = '0'
			},
			async my_invInfo() {
				let res = await this.$fetch(this.$api.my_invInfo, {
					region: '330782',
				}, 'GET')
				if (res.code) uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if (res.code == 500) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
					return;
				}
				this.monthGy = res.data.monthGy
				this.totalInv = res.data.totalInv
				this.gyMoneyList = res.data.rule.money0
				this.topData1 = res.data.rule.person0
				this.userEventList = res.data.userEventList
				this.userEventListLength = this.userEventList.length
				for (let i = 0; i < this.gyMoneyList.length; i++) {
					let obj = {}
					obj.money = this.gyMoneyList[i]
					obj.num = this.topData1[i]
					this.dataList.push(obj)
				}
			},
			// 经纪人排行榜
			async query_charts() {
				let res = await this.$fetch(this.$api.query_charts, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.rankInviteList = res.data.list
				this.user = res.data.user
				if (!this.user.rank) {
					this.user.rank = "99+"
				}
			},
			// 查询经纪人
			async query_broker() {
				let res = await this.$fetch(this.$api.query_broker, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.gainRevenue = res.data.gainRevenue
				this.invitationsCount = res.data.invitationsCount
				this.tipList = res.data.profitTable
				// for (let i = 0; i < this.list.length; i++) {
				// 	if (this.list[i].percentage == "0" || this.list[i].count === 0) {
				// 		console.log(i)
				// 		this.list.splice(i, 1)
				// 	}
				// }
				this.list = res.data.invitationsNumber.filter((item) => {
					return item.count != 0
				})
				console.log('经纪人', res)
			},
			// 下拉
			downMenu(e) {
				console.log(this.downIndex, e.currentTarget.dataset.index)
				if (this.downIndex === e.currentTarget.dataset.index) {
					this.downIndex = ''
				} else {
					this.downIndex = e.currentTarget.dataset.index
				}
			},
			torank() {
				uni.navigateTo({
					url: '/pages/syncAppNewPage/boss-invite-rank'
				})
			},
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			},
			colrdo() { //插入一条弹幕
				let randomArr = this.getRandomArrayElements(this.danmu, 20)
				this.$nextTick(() => {
					for (let i = 0; i < randomArr.length; i++) {
						// setTimeout(() => {
						this.$refs.lffBarrage.add({
							item: randomArr[i],
							status: 'reuse'
						});
						// }, 1000)
					}
				})
			},
			// 获取更多
			onMore() {
				this.$nextTick(() => {
					if (this.moreText === '查看全部 >>') {
						this.height = 480
						this.moreText = '收起 ^'
					} else {
						this.height = 270
						this.moreText = '查看全部 >>'
					}
				})
			},
			// 是否展示经济人
			isShowPeople() {
				this.$fetch(this.$api.getIsBrokerFlag, {}, 'POST').then(e => {
					this.showPeople = e.data
				})
			},
			changTab(e) {
				if (e == 2 && !this.showPeople) {
					uni.showToast({
						title: '该功能暂未开放，敬请期待',
						icon: 'none'
					})
					return
				}
				this.isShowShare = false
				this.get_user_qrcode()
				this.activeIndex = e
				this.colrdo()
			},
			onChange(e) {
				this.timeData = e
			},
			dateFormat() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				let week = date.getDay(); // 星期
				let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ];
				return (year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds + " " + weekArr[
					week]);
			},
			async my_sub1() {
				let ress = await this.$fetch(this.$api.my_sub_in, {
					pageNum: 0,
					pageSize: 10000
				}, 'POST')
				console.log(ress, '触发');
				if (ress.code) return uni.showToast({
					title: ress.msg,
					icon: 'none'
				})
				ress.rows.forEach(item => {
					item.avatar = item.toAvaer ? item.toAvaer : ''
					item.pic = this.imgPath + item.avatar
				})
				this.yqUserAvantar = [...this.yqUserAvantar, ...ress.rows]
				// console.log(this.yqUserAvantar)
				// console.log(ress)
			},
			handleOpenPage(id) {
				uni.navigateTo({
					url: '/pages/help/help-detail?id=' + id
				})
			},
			myjob() {
				uni.navigateTo({
					url: '/pages/myjob/myjob?fr=' + JSON.stringify(this.friendsLists)
				})
			},
			gengduo() {
				uni.navigateTo({
					url: '/pages/invite-friend/invite-friend-detail?xygy=' + this.yxgy + '&xygz=' + this.yxgz +
						'&leijiRenshu=' + this.leijiRenshu
				})
			},
			openYaoq() {
				this.isShowYaoq = true
			},
			closeYaoq() {
				this.isShowYaoq = false
				this.isShowShare = true
			},
			// 保存至相册
			handleSaveAlbum() {
				uni.saveImageToPhotosAlbum({
					filePath: this.qrcodeSrc,
					success: (res) => {
						uni.showToast({
							title: '海报已存至相册',
						})
						this.isShowPost = false
						this.task_share()
						// 不能移除
						// uni.removeStorageSync('qr')
					},
					fail: res => {
						console.log(res, '失败');
					}
				})
			},
			formatDuring(mss) {
				var days = parseInt(mss / (1000 * 60 * 60 * 24));
				var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = (mss % (1000 * 60)) / 1000;
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				return hours + ":" + minutes + ":" + seconds;
			},
			// 获取我的下级 好友
			async my_sub() {
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.requestObj.pageNum
				let res = await this.$fetch(this.$api.my_sub, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let ress = await this.$fetch(this.$api.my_sub_in, this.requestObj, 'POST')
				if (ress.code) return uni.showToast({
					title: ress.msg,
					icon: 'none'
				})
				/* console.log(ress) */
				this.totalnum = " " + res.total
				// 整理数据
				ress.rows.forEach(item => {
					item.avatar = item.toAvaer ? item.toAvaer : ''
					item.pic = this.imgPath + item.avatar
					if (item.status == 2) {
						this.num = this.num + item.invitationPrice
					}
					if (item.status != 0 && item.status != 4) {
						this.total = this.total + 1;
					}
					if (item.status == 1) {
						let Time = new Date(item.jiacheTimes.replace(/-/g, '/'));
						let timestemp = Time.getTime(); //开工时间
						let timestempday = (new Date()).getTime(); //当前时间
						let xjian = (timestemp - timestempday)
						/* 	console.log(xjian, '~~~~~~~~') */
						item.jiacheTimess = xjian
						/* 	console.log(xjian<0, '~~~~~~~~') */
						if (xjian > 0) {
							item.jiacheTimes = this.formatDuring(xjian)
						} else {
							item.jiacheTimes = '00:00:00'
						}
					}
				})
				this.friendsList = [...this.friendsList, ...ress.rows]
				res.rows.forEach(item => {
					item.avatar = item.avatar ? item.avatar : ''
					item.pic = this.imgPath + item.avatar
					var st = 0
					for (var i = 0; i < this.friendsList.length; i++) {
						if (item.userId == this.friendsList[i].toUserId) {
							st = this.friendsList[i].status + 1
							break
						}
					}
					item.stot = st
				})
				// 拼接
				this.friendsLists = [...this.friendsLists, ...res.rows]
				this.hasFlag = this.friendsList.length < ress.total
				// 改标题
				this.friendsNum = res.total
				this.changTitle()
				this.bust()
			},
			bust() {
				this.timer = setInterval(() => {
					this.friendsList.forEach(item => {
						if (item.status == 1) {
							console.log(item.jiacheTimes)
							item.jiacheTimess = item.jiacheTimess - 1000
							item.jiacheTimes = '00:00:00'
							item.jiacheTimes = this.formatDuring(item.jiacheTimess)
						}
					})
				}, 1000)
			},
			//判断有几个好友
			changTitle() {
				if (this.friendsNum) {
					uni.setNavigationBarTitle({
						title: '邀请好友'
					})
				}
				/* （' + this.friendsNum + '）' */
			},
			// 获取二维码
			async get_user_qrcode() {
				let res = await this.$fetch(this.$api.get_user_qrcode, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// console.log(11,baseURL);
				this.obj = res.data
				this.val = res.data.urlPath
				this.make()
			},
			//分享到
			handleShare(scene) {
				setTimeout(() => {
					this.isShowShare = false
				}, 2000)
				if (scene == 'WXSenceTimeline') {
					uni.share({
						provider: "weixin",
						scene: scene,
						type: 0,
						summary: '',
						// href: 'https://zlg-h5.linglinggong.net/h5',
						// href: 'https://zlg-h5.linglinggong.net/#/pages/share-page/share-page',
						// href: 'http://share.linglinggong.net/#/?taskId=' + '' + '&fenxid=' + uni.getStorageSync('userId'),
						href: `http://zlg-h5.linglinggong.net/#/?code=${uni.getStorageSync('userId')}`,
						title: '海量高薪任务日结，工作轻松，时间自由，上班不如一起做零工！我邀请你来找零工，一起赚钱吧',
						imageUrl: 'http://images.linglinggong.net/FovByz9oRrP4wIPyrtiJJf-0cxwB',
						// imageUrl: this.postUrl,
						success: function(res) {
							this.task_share()
						},
						fail: function(err) {}
					});
					return
				}
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					summary: '海量高薪任务日结，工作轻松，时间自由，上班不如一起做零工！',
					imageUrl: 'https://images.linglinggong.net/%E5%9B%BE%E5%B1%82%2049.png',
					title: this.userInfo.user.userName + " " + "邀您加入 找零工 ，和我一起赚钱吧！",
					miniProgram: {
						id: 'gh_b28fa89d3db2',
						path: `pages/start-n/start-n?fenxid=${uni
							.getStorageSync('userId')}`,
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: ret => {
						this.task_share()
					}
				});
			},
			onShareAppMessage() {
				return {
					title: this.userInfo.user.userName + " " + "邀您加入 找零工 ，和我一起赚钱吧！",
					desc: '海量高薪任务日结，工作轻松，时间自由，上班不如一起做零工！',
					path: `/pages/start-n/start-n?fenxid=${uni.getStorageSync('userId')}`,
					imageUrl: 'https://images.linglinggong.net/%E5%9B%BE%E5%B1%82%2049.png',
					success: res => {
						this.task_share()
					}
				}
			},
			onShareTimeline() {
				return {
					title: this.userInfo.user.userName + " " + "邀您加入 找零工 ，和我一起赚钱吧！",
					desc: '海量高薪任务日结，工作轻松，时间自由，上班不如一起做零工！',
					path: `/pages/start-n/start-n?fenxid=${uni.getStorageSync('userId')}`,
					imageUrl: 'https://images.linglinggong.net/%E5%9B%BE%E5%B1%82%2049.png',
					success: res => {
						this.task_share()
					}
				}
			},
			async task_share() {
				let res = await this.$fetch(this.$api.task_share, {
					type: 1
				}, 'POST')
			},
			// 创建画布
			createdPost(avatar, userName, qrcode) {
				console.log('创建画布', avatar, userName, qrcode)
				const ctx = uni.createCanvasContext('invitation-post')
				//背景图片
				ctx.drawImage('https://images.linglinggong.net/static/icon1/08.png', 0, 0, 385, 385)
				// //用户名
				// ctx.setFillStyle('#402110')
				// ctx.font = "bold 14px PingFangSC-Medium";
				// ctx.fillText(userName, 160 / 2, 40 / 2 + 20)
				// const metrics = ctx.measureText(userName)
				// //说明
				// ctx.setFillStyle('rgba(64,33,16,0.50)')
				// ctx.font = "12px PingFangSC-Regular";
				// ctx.fillText('扫码加入“找零工”，和我一起赚钱吧！', 163 / 2, 90 / 2 + 17)
				//二维码
				ctx.drawImage(qrcode, 58 / 2, 150 / 2, 496 / 2, 496 / 2)
				//提示
				ctx.setFillStyle('#402110')
				ctx.font = "14px PingFangSC-Regular";
				// ctx.fillText('长按二维码保存至相册', 166 / 2, 726 / 2 + 20)
				//任务头像
				// ctx.arc(85 / 2, 85 / 2, 22.5, 0, 2 * Math.PI) // 画圆
				// ctx.clip()
				// ctx.drawImage(avatar, 40 / 2, 40 / 2, 45, 45)
				ctx.draw(true, () => {
					// console.log('画画')
					uni.canvasToTempFilePath({
						canvasId: 'invitation-post',
						success: (res) => {
							this.postUrl = res.tempFilePath
						}
					})
				})
			},
			//打开海报
			async handleOpenPost() {
				await this.make2()
				this.isShowPost = true
				this.isShowShare = false
			},
			//拨打客服电话
			kfPhone() {
				uni.makePhoneCall({
					phoneNumber: this.serviceTelephone
				})
			},
			//关闭海报
			handleClosePost() {
				this.isShowPost = false
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// if (uni.getStorageSync('token')) {
			// 	setTimeout(() => {
			// 		getContacts()
			// 	}, 1000)
			// }
			// #endif
			if (!uni.getStorageSync('token')) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			this.imgPath = uni.getStorageSync('imgPath')
			// this.get_data()
			this.my_sub1()
			this.query_broker()
			this.query_charts()
			this.my_invInfo()
		},
		onShow() {
			this.isShowShare = false
			if (this.timer == '') {
				this.bust()
			}
			this.get_user_qrcode()
			this.serviceTelephone = uni.getStorageSync('serviceTelephone')
			this.isShowPeople()
		},
		onHide() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #F3E9C9;
	}

	.brokerBg {
		background-image: url('https://images.linglinggong.net/broker.png');
		min-height: 3500.3rpx;
	}

	.brokerBg1 {
		background-image: url('https://images.linglinggong.net/yaoqing.png');
	}

	.container {
		width: 100%;
		background-size: 100% 100%;
		overflow-x: hidden;

		.fudai-box {
			width: 100vw;
			height: 100vh;
			// background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			.fudai-box-center {
				width: 70%;
				// height: 600rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.fudai-box-center-p {
					position: absolute;
					z-index: 999999;
					left: 0;
					top: 0;

					image {
						width: 56rpx;
						height: 100%;
					}
				}
			}
		}

		.phone {
			width: 130rpx;
			height: 50rpx;
			position: fixed;
			z-index: 99999999;
			top: 50%;
			right: 0;
			border-radius: 67rpx 0 0 67rpx;
			background-color: rgba(0, 0, 0, 0.4);
			display: flex;
			flex-direction: row;
			align-items: center;

			&>image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 13rpx;
				margin-right: 13rpx;
			}

			&>text {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 28rpx;
			}
		}

		.fix-title {
			z-index: 1;
			width: 100vw;
			margin-top: 400rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}

		.yqroul {
			overflow: hidden;
			width: 690rpx;
			height: 426rpx;
			margin: 0 auto;
			background: url('https://images.linglinggong.net/XCX/newMy/invite1.png') center center/cover no-repeat;

			.rankTitle {
				width: 220rpx;
				height: 60rpx;
				background: #FE531B;
				border-radius: 0rpx 30rpx 30rpx 0rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 60rpx;
				margin: 40rpx 0 0 0;
				text-align: right;

				text {
					margin-right: 25rpx;
				}
			}

			.rank {
				display: flex;
				justify-content: space-between;
				margin: 25rpx 30rpx 0;
				text-align: center;

				.rankItem {
					text {
						color: #FE531B;
						font-size: 24rpx;
						display: inline-block;
						margin-bottom: 13rpx;
					}

					.rankBg {
						width: 111rpx;
						height: 147rpx;
						overflow: hidden;
						border-radius: 20rpx;

						.rankStatus {
							width: 111rpx;
							height: 147rpx;
							position: relative;

							.rankStatus3 {
								position: absolute;
								top: 0;
								content: '';
								background: url("https://images.linglinggong.net/XCX/gray.png") center center/cover no-repeat;
								// background: url("https://images.linglinggong.net/static/grayIcon.png") center center/cover no-repeat;  
								width: 111rpx;
								height: 147rpx;
								z-index: 11;
								left: 0;
								display: flex;
								flex-direction: column;
								justify-content: flex-end;

								text {
									color: #fff !important;
									text-align: center;
									font-size: 20rpx;
								}
							}

							.rankStatus2 {
								width: 111rpx;
								background: linear-gradient(#fd784f, #f61d24);
								position: absolute;
								bottom: -2rpx;
								z-index: 8;
								left: 0;
							}

							.rankStatus1 {
								width: 111rpx;
								height: 147rpx;
								background: rgba(148, 148, 148);
								position: absolute;
								top: 0;
								z-index: 3;
								left: 0;
							}
						}
					}

					.text {
						color: #F62126;
					}
				}
			}

			.rankTime {
				height: 59rpx;
				width: 447rpx;
				margin: 0rpx auto;
				margin-top: 8rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50rpx;
				font-weight: 500;
			}
		}

		.make-money {
			width: 690rpx;
			height: 338rpx;
			margin: 50rpx auto 0rpx auto;
			background: url('https://images.linglinggong.net/XCX/newMy/invite.png')center center/cover no-repeat;

			&>.title {
				text-align: center;
				color: #FFFFFF;
				font-size: 34rpx;
				font-weight: bold;
				line-height: 60rpx;
			}

			&>.steps {
				height: 200rpx;
				margin-top: 30rpx;
				padding: 0 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>.item {
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #F62126;
					text-align: center;

					&>image {
						width: 80rpx;
						height: 80rpx;
						margin: 10rpx 0;
					}
				}

				&>image {
					width: 40rpx;
					height: 40rpx;
					margin-top: -40rpx;
				}
			}
		}

		.invite_info {
			width: 720rpx;
			height: 330rpx;
			background-image: url('http://images.linglinggong.net/Fv0nC6l5zYQsbi-ZJu-1pxRMTpzr');
			background-size: 100% 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.invite_info_item {
				height: 100rpx;
				width: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// border: 1px solid; 
				padding-top: 20rpx;
				margin-bottom: 100rpx;
				padding-left: 50rpx;
				padding-right: 50rpx;

				.tips3 {
					position: absolute;
					right: 8%;
					top: 10%;
					z-index: 9;

					// width: 50rpx;
					// border: 1px solid;
					image {
						width: 28rpx;
						height: 100%;
					}
				}

				&>text {
					font-size: 20rpx;
					font-weight: 400;
					color: #A5A5A5;
					line-height: 20rpx;
				}

				&>view {
					margin-top: 30rpx;

					&>image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.invite_info_border {
				width: 1rpx;
				height: 74rpx;
				border-left: 1rpx solid rgba(252, 201, 40, 0.5);
			}

			.invite_info_item_num {
				font-size: 38rpx;
				font-weight: 600;
				color: #661404;
				line-height: 45rpx;
			}

			.invite_info_item_num1 {
				font-size: 48rpx;
				font-weight: 500;
				color: #FE4B28;
				line-height: 45rpx;
			}
		}

		.yaoqingjiangli {
			// border: 1px solid red;
			width: 100%;
			// height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// margin-top: 310rpx;
			.yaoqingjiangli-box {
				width: 98%;
				margin-top: 10rpx;
				height: 410rpx;
				background-image: url('http://images.linglinggong.net/FkNKFOZg8ErHbEl5KmtarGZUhSia');
				background-size: 100% 100%;
				// border: 1px solid;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 30rpx;
				padding-bottom: 40rpx;
				position: relative;

				.ljiyaoqing {
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 3%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 540rpx;
						height: 100%;
					}
				}

				.yaoqingjiangli-box-item {
					// border: 1px solid;
					width: 36%;
					height: 300rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.yaoqingjiangli-box-num {
						margin-bottom: 130rpx;
						margin-left: -10rpx;
						font-size: 52rpx;
						font-weight: 600;
					}
				}

				.bc1 {
					background-image: url('http://images.linglinggong.net/FrHz6MbzREuhYPwXI_uwkJw_DeBl');
					background-size: 100% 100%;
					// margin-left: -10rpx;
				}

				.bc2 {
					background-image: url('http://images.linglinggong.net/FgtXwYNlBIK9QbioZTe3Ed3nAC-O');
					background-size: 100% 100%;
				}
			}
		}

		.yaoqingrenshu {
			width: 98%;
			margin: 0 auto;
			margin-top: 30rpx;
			height: 720rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: url('http://images.linglinggong.net/Fvq_mmtAvwzobGnw7UNZyYJHa_2V');
			background-size: 100% 100%;

			.yaoqingrenshu-box {
				width: 94%;
				position: relative;

				.yaoqingrenshu-p {
					position: absolute;
					bottom: -70rpx;
					left: 0;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.yaoqingrenshu-p-box {
						width: 60%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 26rpx;
					}
				}

				.yaoqingrenshu-box-item {
					padding: 60rpx 0;
					position: relative;

					.p-guyuan {
						position: absolute;
						left: 0;
						top: 0;

						image {
							width: 160rpx;
							height: 100%;
						}
					}
				}
			}
		}

		.daojishi {
			width: 100%;
			height: 90rpx;
			padding-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// border: 1px solid;
			.daojishi-box {
				width: 86%;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #666;
				}

				.daoji-time {
					.time {
						.time__item {
							letter-spacing: 4rpx;
							font-size: 34rpx;
							color: #ED0833;
							font-weight: 400;
						}
					}
				}
			}
		}

		.guize-btn-box {
			width: 100%;
			height: 100rpx;
			// border: 1px solid;
			padding-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.guize-btn-box-btn {
				width: 92%;
				height: 90%;
				background: #F39B19;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
				color: #fff;
				font-size: 32rpx;
			}
		}

		.guize-btn-box2 {
			width: 100%;
			height: 100rpx;
			// border: 1px solid;
			// padding-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;

			.guize-btn-box-btn2 {
				width: 62%;
				height: 80%;
				border-radius: 80rpx;
				// background: #FCC928;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #000;
				font-size: 28rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.yaoqingjiangli2 {
			// border: 1px solid red;
			width: 100%;
			// margin: 0 auto;
			padding-top: 20rpx;
			// height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			// margin-top: 310rpx;
			.yaoqingjiangli-box2 {
				width: 98%;
				// margin-top: 80rpx;
				height: 540rpx;
				background-image: url('http://images.linglinggong.net/FiGQcROnQrr5_hmp4-NdSMJRrsBv');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// border: 1px solid;
				display: flex;
				justify-content: center;
				align-items: center;

				// padding-top: 60rpx;
				.yaoqingjiangli-box-item2 {
					width: 38%;
					height: 140rpx;
					margin-top: 34rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					.tips1 {
						position: absolute;
						right: 8%;
						top: 10%;
						z-index: 9;

						// width: 50rpx;
						// border: 1px solid;
						image {
							width: 28rpx;
							height: 100%;
						}
					}

					.yaoqingjiangli-box-num2 {
						margin-top: 40rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #FE4B28;
					}
				}
			}
		}

		.bottom-img {
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			height: 68rpx;
			background: #F75F4B;
			padding: 20rpx 0 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.yiyaoqing {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.yiyaoqing-box {
				width: 70%;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.yiyaoqing-box-left {
					width: 140rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					// border: 1px solid;
				}

				.yiyaoqing-box-mid {
					flex: 1;
					// border: 1px solid;
					display: flex;
					justify-content: space-around;
					align-items: center;

					// margin-right: -50rpx;
					// border: 1px solid red;
					.yiyaoqing-box-mid-item {
						width: 60rpx;
						// height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.yiyaoqing-box-right {
					width: 140rpx;
					// border: 1px solid;
					// margin-left: -40rpx;
					// border: 1px solid;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666666;

					image {
						padding-left: 2rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 20rpx;
						height: 100%;
					}
				}
			}
		}

		&>.bottom {
			z-index: 1000;
			position: fixed;
			bottom: 0;
			width: 100vw;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			height: 180rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			&>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 24%;

				&>image {
					bottom: 12rpx;
					width: 100rpx;
					height: 100rpx;
				}

				&>text {
					font-size: 24rpx;
				}

				&>button {
					height: 100rpx;
					background-color: #fff;

					&>image {
						bottom: 12rpx;
						width: 100rpx;
						height: 100rpx;
					}

					&>text {
						font-size: 24rpx;
					}
				}

				button::after {
					border: none;
				}
			}

			&>view:first-child {
				margin-left: 46rpx;
			}

			&>view:nth-child(2) {
				margin: 0 56rpx 0 76rpx;
			}

			&>view:last-child {
				flex: 1;
				height: 100rpx;
				background-color: #FCC928;

				&:active {
					opacity: 0.7;
				}
			}
		}

		&>.modal {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 999;
			// opacity: 0;
			// outline: 0;
			// text-align: center;
			// -ms-transform: scale(1.185);
			// transform: scale(1.185);
			// backface-visibility: hidden;
			// perspective: 2000upx;
			background: rgba(0, 0, 0, 0.4);

			// pointer-events: none;
			// transition: all 0.3s ease-in-out 0s;
			// pointer-events: none;
			&.show {
				// opacity: 1;
				// transition-duration: 0.3s;
				// -ms-transform: scale(1);
				// transform: scale(1);
				// overflow-x: hidden;
				// overflow-y: auto;
				// pointer-events: auto;
			}

			.my-post {
				// border: 1px solid  #4CD964;
				position: fixed;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 9999999;
				// width: 520rpx;
				// height: 520rpx;
				width: 520rpx;
				height: 520rpx;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.close {
				position: fixed;
				width: 70rpx;
				height: 70rpx;
				left: 50%;
				margin-left: -35rpx;
				bottom: 90rpx;
				pointer-events: auto;
			}
		}
	}

	.nav-title {
		width: 100%;
		height: 119rpx;
		display: flex;
		justify-content: center;

		&-sear {
			width: 556rpx;
			height: 119rpx;
			display: inline-block;
			background: url('https://images.linglinggong.net/static/yq.png') center center/cover no-repeat;
			margin-top: 39rpx;
			display: flex;
			justify-content: space-between;
			;

			&-right {
				font-size: 46rpx;
				font-family: ZhenyanGB;
				font-weight: 400;
				color: #FFFDF7;
				width: 266rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 10rpx 15rpx 0 0;
			}

			&-left {
				font-size: 46rpx;
				font-family: ZhenyanGB;
				font-weight: 400;
				color: #FFFDF7;
				width: 266rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				margin: 10rpx 0 0 15rpx;
			}

			.active {
				background: url('https://images.linglinggong.net/XCX/yqac.png') center center/cover no-repeat;
				font-size: 46rpx;
				font-weight: 400;
				text-shadow: 0rpx 2rpx 0rpx rgba(96, 32, 7, 0.58);
			}
		}
	}

	.rankList {
		&-title {
			background: url('https://images.linglinggong.net/static/ranktitle.png') center center/cover no-repeat;
			width: 100%;
			margin: 90rpx auto 0;
			display: flex;
			justify-content: center;

			&>view:nth-child(1) {
				text-align: center;
				display: inline-block;
				margin-top: 100rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #260900;
				line-height: 100rpx;
				display: flex;
				align-items: center;

				text {
					display: inline-block;
					width: 100rpx;
					height: 34rpx;
					background: #FE531B;
					border-radius: 17rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #FFF2DC;
				}
			}
		}

		&-list {
			background: #FFF2DC;
			min-height: 849rpx;
			height: 100%;
			width: 686rpx;
			margin: 0 auto;
			padding-bottom: 112rpx;

			&-top {
				margin: 0 auto;
				width: 646rpx;
				border-top: 1rpx solid #5F0703;

				&-title {
					display: flex;
					height: 92rpx;
					line-height: 92rpx;
					border-bottom: 1rpx solid #5F0703;
					font-size: 26rpx;
					font-weight: bold;
					color: #260900;
					justify-content: space-between;
					padding: 0 30rpx;
					box-sizing: border-box;
					// &>view:nth-child(1) {
					// 	margin-right: 136rpx;
					// 	text-wrap: nowrap;
					// }
					// &>view:nth-child(2) {
					// 	margin-right: 33rpx;
					// 	text-wrap: nowrap;
					// }
					// &>view:nth-child(3) {
					// 	margin-right: 20rpx;
					// 	text-wrap: nowrap;
					// }
					// &>view:nth-child(4) {
					// 	margin-right: auto;
					// 	text-wrap: nowrap;
					// }
				}

				&-content {
					display: flex;
					height: 92rpx;
					line-height: 92rpx;
					border-bottom: 1rpx solid #5F0703;
					font-size: 26rpx;
					font-weight: bold;
					color: #260900;
					align-items: center;
					transition: all linear 0.3s;
					padding: 0 30rpx;
					box-sizing: border-box;

					&>text:nth-child(1) {
						width: 180rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
						margin-right: 50rpx;
					}

					&>text:nth-child(2) {
						text-align: center;
						width: 120rpx;
					}

					.checkbox1 {
						margin-left: 170rpx;
					}
				}

				&-empty {
					margin: 0 auto;
					display: flex;
					width: 686rpx;
					height: 263rpx;
					margin-bottom: 263rpx;
					align-items: center;
					justify-content: center;
					background: linear-gradient(0deg, #F7CB99, #F9D8AA, #FFF0D9);
					padding-bottom: 90rpx;

					.img {
						width: 646rpx;
						height: 100%;
						display: inline-block;
						border-top: 1rpx solid #af7c6f;
					}
				}
			}
		}
	}

	.checkbox1 /deep/ .uni-checkbox-input-checked.uni-checkbox-input-disabled {
		color: #00CF3F !important;
	}

	.checkbox2 /deep/ .uni-checkbox-input-checked .uni-checkbox-input-disabled {
		color: #00CF3F !important;
	}

	// /deep/ .uni-checkbox-input-disabled {
	// 	color: #00CF3F;
	// }
	.broker {
		padding-bottom: 56rpx;

		// margin-top: 260px;
		&-title {
			background: url('https://images.linglinggong.net/XCX/brokerTitle.png') center center/cover no-repeat;
			width: 100%;
			height: 209rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column-reverse;

			text {
				margin-left: 53rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #260900;
			}
		}

		&-content {
			width: 690rpx;
			min-height: 352rpx;
			border-radius: 0rpx 0rpx 12rpx 12rpx;
			margin: 0 auto;
			background: #FFF2DC;
			line-height: 82rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #260900;

			&-text {
				padding-top: 30rpx;
				margin: 0 42rpx 0 22rpx;
				overflow: hidden;
				transition: height linear 0.3s 0.1s;

				view {
					padding: 20rpx 0;
					line-height: 48rpx;
					width: 100%;
					border-top: 1px solid #5F0703;
				}
			}

			&-more {
				text-align: center;
				margin-bottom: 10rpx;
				font-weight: bold;
				color: #260900;
				font-size: 24rpx;
				// padding-top: 10rpx;
			}
		}

		&-income {
			background: url('https://images.linglinggong.net/XCX/brokerMonery.png') center center/cover no-repeat;
			width: 100%;
			height: 700rpx;
			overflow: hidden;
			position: relative;

			.question {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 348rpx;
				left: 420rpx;
			}

			.tip {
				width: 277rpx;
				// height: 100%;
				background-color: rgba(0, 0, 0, 0.56);
				font-size: 28rpx;
				color: #fff;
				line-height: 40rpx;
				font-weight: bold;
				padding: 14rpx 0rpx 24rpx 17rpx;
				box-sizing: border-box;
				position: absolute;
				bottom: 320rpx;
				left: 460rpx;
				border-radius: 20rpx;

				view {
					display: flex;
					align-items: center;

					view:nth-child(1) {
						margin-right: 5rpx;
						padding-bottom: 4rpx;
					}
				}

				.title {
					margin-bottom: 10rpx;
				}
			}

			&-text {
				text-align: center;
				margin-top: 162rpx;
				margin: 162rpx 204rpx;
				font-size: 40rpx;
				font-weight: 500;
				color: #FF444B;
			}

			&-img {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				margin: -152rpx 5rpx 0 0;

				.img {
					width: 115rpx;
					height: 115rpx;
					border-radius: 50%;
					overflow: hidden;
					display: block;
				}

				view {
					height: 30rpx;
					background: linear-gradient(177deg, #FBB03B 0%, #FF9800 100%);
					box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(183, 21, 31, 0.41);
					border-radius: 15rpx;
					font-size: 24rpx;
					width: 68rpx;
					min-width: 68rpx;
					display: block;
					color: #FFF;
					text-align: center;
					line-height: 30rpx;
					margin-top: 15rpx;
				}
			}
		}

		&-qrcode {
			width: 100%;
			height: 728rpx;
			background: url('https://images.linglinggong.net/XCX/qrcode.png') center center/cover no-repeat;
			margin-top: -275rpx;
			overflow: hidden;

			&-title {
				font-size: 36rpx;
				font-weight: 500;
				color: #fff;
				line-height: 39rpx;
				text-align: center;
				margin-top: 9rpx;
			}

			&-qr {
				margin: 0 auto;
				margin-top: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				&>.qrimg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 380rpx;
					height: 380rpx;
					background-color: #fff;

					&>.myCanvas {
						width: 320rpx;
						height: 320rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						// transform: translate(-50%,-50%);
					}
				}
			}

			&-share {
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				margin: -165rpx 155rpx 0;

				button::after {
					border: none;
				}

				&>button {
					height: 160rpx;
					padding: 0;
					margin: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					background-color: transparent;
					line-height: 30rpx;

					.img {
						width: 81rpx;
						height: 81rpx;
					}

					view {
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				&>view {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.img {
						width: 81rpx;
						height: 81rpx;
					}

					view {
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}

			&-num {
				width: 686rpx;
				min-height: 700rpx;
				background: #FFF2DC;
				box-shadow: 0rpx 7rpx 34rpx 1rpx rgba(183, 21, 31, 0.24), 0rpx 11rpx 46rpx 0rpx #FDF4E1;
				border-radius: 12rpx;
				margin: 85rpx auto 0;
				position: relative;

				&-title {
					text-align: center;
					background: url("https://images.linglinggong.net/XCX/num.png") center center/cover no-repeat;
					height: 59rpx;
					width: 261rpx;
					font-size: 36rpx;
					color: #fff;
					position: absolute;
					top: -30rpx;
					left: 50%;
					transform: translateX(-130.5rpx);
				}

				&-content {
					border: 1rpx solid transparent;

					&-tip {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 660rpx;
						height: 200rpx;
						color: #661404;
						font-weight: bold;
						border: 1px solid #FACE78;
						border-radius: 12rpx;
						margin: 13rpx auto;

						&>view:nth-child(2) {
							color: #FF444B;
							margin-top: 29rpx;
						}
					}

					&>text {
						width: 160rpx;
						height: 50rpx;
						background: #FE531B;
						border-radius: 0rpx 25rpx 25rpx 0rpx;
						display: block;
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 50rpx;
						margin-top: 24rpx;
						margin-bottom: 40rpx;
					}

					&>view:nth-child(3) {
						width: 660rpx;
						min-height: 104rpx;
						margin: 0 auto;
						line-height: 104rpx;

						&>view {
							background: rgba(254, 216, 155, 0.3);
							margin-bottom: 30rpx;
							border-radius: 10rpx;

							&>view:nth-child(1) {
								margin-left: 22rpx;
								display: flex;
								justify-content: space-between;
								color: #661404;
								font-weight: bold;

								&>view:nth-child(2) {
									margin-right: 22rpx;

									&>.img1 {
										width: 22rpx;
										height: 22rpx;
									}
								}
							}

							&>.child {
								transition: all linear 0.3s;

								&>view {
									display: flex;
									justify-content: space-between;
									align-items: center;

									.img {
										width: 60rpx;
										height: 60rpx;
										border-radius: 50%;
										margin-left: 9rpx;
										margin-right: -200rpx;
									}

									.amount {
										width: 160rpx;
										text-align: right;
										margin-right: 15rpx;
										font-weight: bold;
										color: #FE531B;
										font-size: 25rpx;
									}

									.remind {
										width: 160rpx;
										height: 60rpx;
										line-height: 60rpx;
										text-align: center;
										background-color: #F4633E;
										color: #FFF2DC;
										font-weight: bold;
										font-size: 28rpx;
										border-radius: 30rpx;
										margin-right: 15rpx;
									}

									.reminded {
										color: #fff;
										background-color: #D7D7D7;
									}

									&>view:nth-child(2) {
										font-weight: bold;
										color: #661404;
										font-size: 27rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.rankInvite {
		width: 684rpx;
		height: 630rpx;
		background: #FFF2DC;
		box-shadow: 0rpx 7rpx 34rpx 1rpx rgba(183, 21, 31, 0.24), 0rpx 11rpx 46rpx 0rpx #FDF4E1;
		border-radius: 12rpx;
		margin: 105rpx auto;
		border: 1rpx solid transparent;

		&-title {
			background: url("https://images.linglinggong.net/num.png") center center/cover no-repeat;
			width: 261rpx;
			height: 59rpx;
			margin: -30rpx auto;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 59rpx;
			z-index: 999;
			position: relative;
		}

		&-content {
			width: 660rpx;
			height: 602rpx;
			border: 1px dotted #FACE78;
			border-radius: 12rpx;
			margin: 12rpx auto;
			z-index: 1;
			position: relative;

			&-title {
				display: flex;
				font-size: 28rpx;
				font-weight: bold;
				color: #F2563C;
				height: 94rpx;
				line-height: 94rpx;
				border-bottom: 1px solid rgba(95, 7, 3, 0.3);
				margin: 0 7rpx;

				&>text:nth-child(1) {
					margin: 0 168rpx 0 46rpx;
				}

				&>text:nth-child(2) {
					margin-right: 203rpx;
				}
			}

			&-list {
				display: flex;
				font-size: 28rpx;
				font-weight: bold;
				height: 119rpx;
				line-height: 119rpx;
				border-bottom: 1px solid rgba(95, 7, 3, 0.3);
				margin: 0 7rpx;
				display: flex;
				align-items: center;

				&>view:nth-child(1) {
					&>image {
						width: 133rpx;
						height: 40rpx;
						display: inline-block;
						margin: 0 52rpx 0 22rpx;
					}
				}

				&>view:nth-child(2) {
					display: flex;
					align-items: center;
					color: #661404;

					&>.img {
						width: 57rpx;
						height: 57rpx;
						border-radius: 50%;
					}

					&>.one {
						border: 1px solid #FACE78;
					}

					&>.two {
						border: 1px solid #FACE78;
					}

					&>.three {
						border: 1px solid #FACE78;
					}

					&>view {
						margin-left: 9rpx;
					}
				}

				&>view:nth-child(3) {
					margin-left: auto;
					margin-right: 70rpx;
					color: #661404;
				}
			}

			&>view:nth-child(4) {
				border-bottom: none;
			}

			&-my {
				display: flex;
				font-size: 28rpx;
				font-weight: bold;
				height: 119rpx;
				width: 686rpx;
				line-height: 117rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFF2DC;
				box-shadow: 0rpx 7rpx 55rpx 2rpx rgba(183, 21, 31, 0.41), 0rpx 11rpx 46rpx 0rpx #FDF4E1;
				margin-left: -6px;
				border-radius: 12rpx;

				&>view:nth-child(1) {
					width: 133rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: #661404;
					display: inline-block;
					margin: 0 60rpx 0 36rpx;
				}

				&>view:nth-child(2) {
					display: flex;
					align-items: center;
					color: #661404;

					&>.img {
						width: 57rpx;
						height: 57rpx;
						border-radius: 50%;
					}

					&>.one {
						border: 1px solid #FACE78;
					}

					&>.two {
						border: 1px solid #FACE78;
					}

					&>.three {
						border: 1px solid #FACE78;
					}

					&>view {
						margin-left: 9rpx;
					}
				}

				&>view:nth-child(3) {
					margin-left: auto;
					margin-right: 88rpx;
					color: #661404;
				}
			}

			&-foot {
				background: url('https://images.linglinggong.net/foot.png') center center/cover no-repeat;
				width: 261rpx;
				height: 59rpx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 50rpx;
				margin: 28rpx auto;
			}
		}
	}

	.preventMsak {
		height: 100vh;
		overflow: hidden;
	}

	//头像框
	.yellow {
		border: 4rpx solid yellow;
	}

	.white {
		border: 4rpx solid white;
	}

	.golden {
		border: 4rpx solid blue;
	}
</style>